<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is a bug</title>
    <style>
        /*css 初始化 */
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
            margin: 0;
            padding: 0;  /*清除元素的内外边距*/
        }

        fieldset, img, input, button {
            border: none;
            padding: 0;
            margin: 0;
            outline-style: none;  /*外面环绕线*/
        }

        ul, ol {
            list-style: none;
        }

        /*去掉原样式中的小黑点*/
        input {
            padding-top: 0;
            padding-bottom: 0;
            font-family: "SimSun", "宋体";  /*字体的自动识别*/
        }

        select, input {
            vertical-align: middle;
        }

        /*输入字居中显示*/
        select, input, textarea {
            font-size: 12px;
            margin: 0;
        }

        /**/
        textarea {
            resize: none;  /*不可以随意拖动*/
        }

        /*防止拖动*/
        img {
            border: 0;
            vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/
        }

        table {
            border-collapse: collapse; /*合并外连线*/
        }

        body {
            font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的写法，宋体的写法*/
            color: #666; /*150%基于当前字体尺寸的百分比行间距*/
            background: #fff;
        }

        .clearfix:before, .clearfix:after {
            /*清除浮动，最好最标准的写法*/
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
        }

        a {
            color: #666;   /*a 标签是不继承颜色 的*/
            text-decoration: none;
        }

        a:hover {
            color: #C81623;
        }

        h1, h2, h3, h4, h5, h6 {
            text-decoration: none;
            font-weight: normal;
            font-size: 100%;
        }

        s, i, em {  /*一般是起装饰作用*/
            font-style: normal;  /*去掉原有的样式*/
            text-decoration: none;  /*去掉下划线或是删除线*/
        }

        .col-red {
            color: #C81623 !important;/*京东主色调*/
        }

        /*公共类*/
        .w {
            /*版心 提取 */
            width: 1210px;
            margin: 0 auto;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .al {
            text-align: left;
        }

        .ac {
            text-align: center;
        }

        .ar {
            text-align: right;
        }

        .hide {
            display: none;
        }

        /*css初始化完成*/
        .fix_top{
            width: 100%;
            background-color: #171717;
        }
        .fix_top .fix_box{
            width: 1220px;
            height: 60px;
            margin: 0 auto;
        }
        .fix_top .fix_pro{
            float: left;
            height: 60px;
            font-size: 18px;
            line-height: 60px;
            font-family: "微软雅黑";
            color: #9d9d9d;
        }
        .fix_top .fix_nav_l{
            float:left;
            margin-left: 100px;
            height: 60px;
        }
        .fix_top .fix_nav_l li{
            float: left;
            margin-right: 30px;
        }
        .fix_top .fix_nav_l a{
            display: block;
            height: 60px;
            font-size: 14px;
            line-height: 60px;
            font-family: "微软雅黑";
            color: #4c4c4c;
        }
        .fix_top .sping1{
            float: right;
            margin-top: 10px;
        }
        .fix_top .sping1 a{
            display: block;
            width: 110px;
            height: 40px;
            color: #e6e6e6;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            font-family:"微软雅黑";
            background-color:#254ba0;
            border-radius: 5px;
        }
        .fix_top .sping1 a:hover{
            background-color: #162b6b;
        }
        .fix_top .fix_nav_r li{
            float: left;
            margin-right: 40px;
        }
        .fix_top .fix_nav_r li a{
            display: block;
            height: 60px;
            font-size: 14px;
            line-height: 60px;
            font-family: "微软雅黑";
            color: #4c4c4c;

        }
        .fix_top li a:hover{
            color:#717171 ;
        }


    </style>
</head>
<body>
<div class="fix_top">
    <div class="fix_box">
        <span class="fix_pro">坚果 Pro</span>
        <ul class="fix_nav_l">
            <li><a href="#">概览</a></li>
            <li><a href="#">功能</a></li>
            <li><a href="#">设计</a></li>
            <li><a href="#">实力派</a></li>
            <li><a href="#">操作系统</a></li>
            <li><a href="#">技术规格</a></li>
            <li><a href="#">图库</a></li>
        </ul>
        <span class="sping1 fr"><a href="#">立即购买</a></span>
        <ul class="fix_nav_r fr">
            <li><a href="#">优先购买码</a></li>
            <li><a href="#">手机回收置换计划</a></li>
        </ul>
    </div>
</div>

</body>
</html>